import React from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import Label from './Label';
import fn from '../../components/PlateformHalf';

const FontText = ({ name, style }) => (
  <View name={`FontText-${name}`} style={{ flexDirection: 'row', marginBottom: fn(24) }}>
    <View style={{ width: fn(100) }}>
      <Label>
        {`${style.fontSize} / ${style.lineHeight}`}
      </Label>
    </View>
    <Text
      style={{
        ...style,
      }}
    >
      {name}
    </Text>
  </View>
);
FontText.defaultProps = {
  style: null,
};
FontText.propTypes = {
  /**
   * ### FontText 属性说明
   *
   * 单选或者复选框UI
   *
   * | Name | Type | Default | Details | isRequired |
   * | ------:| -----------:| -----------: | -----------: | ------:|
   * | name | string | |  | yes |
   * | style | object |  | 文字样式 | no |
   *
   * ### FontText 代码示例(详见示例项目)
   *
   * ```html
   * <FontText name="name" style={fontSize:12,color:'#ccc'}/>
   * ```
   */
  name: PropTypes.string.isRequired,
  style: PropTypes.instanceOf(Object),
};
export default FontText;
